<template>
    <view class="favorite-container">
        <view class="favorite-top">
            <image class="bg-image" src="/static/erji-beijing.png" mode="aspectFill"></image>
            <view class="header-title">收藏</view>
      
            <view class="search-bar">
                <view class="search-input">
                    <image class="search-icon" src="/static/search.png" mode="aspectFit"></image>
                    <input type="text" v-model="searchKeyword" placeholder="搜索商品" placeholder-class="placeholder" @input="handleSearch" />
                </view>
            </view>
        </view>
     
        <scroll-view class="product-list" scroll-y @scrolltolower="loadMore" @refresherrefresh="refresh" refresher-enabled :refresher-triggered="isRefreshing">
            <view class="product-item" v-for="(item, index) in productList" :key="index">
                <image class="product-image" :src="item.image" mode="aspectFill"></image>
                <view class="product-info">
                    <view class="product-title" @click="goToProductDetail(item.id)">{{item.name}}</view>
                    <view class="price-container">
                        <view class="price-info">
                            <text class="current-price">¥{{item.price}}</text>
                            <text class="original-price" v-if="item.originalPrice">¥{{item.originalPrice}}</text>
                        </view>
                        <view class="cart-icon" @click="addToCart(item)">
                            <image src="/static/cart-icon.png" mode="aspectFit"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="loading" v-if="loading">加载中...</view>
            <view class="no-more" v-if="noMore">没有更多数据了</view>
        </scroll-view>
        
        <!-- 微信登录弹窗 -->
        <wechat-login-popup 
          :visible.sync="showLoginPopup" 
          @login-success="handleLoginSuccess" 
          @login-fail="handleLoginFail" 
          @login-cancel="handleLoginCancel"
        ></wechat-login-popup>
    </view>
</template>

<script>
import wechatUtil from '../../utils/wechat.js';
import WechatLoginPopup from '../../components/wechat-login-popup.vue';
import { getCollectList } from '../../api/collect.js';

export default {
    components: {
        WechatLoginPopup
    },
    data() {
        return {
            searchKeyword: '',
            productList: [],
            pageNum: 1,
            pageSize: 10,
            loading: false,
            noMore: false,
            isRefreshing: false,
            showLoginPopup: false,
            timer: null
        }
    },
    onLoad() {
        this.loadData()
    },
    methods: {
        async loadData(refresh = false) {
            if (refresh) {
                this.pageNum = 1
                this.noMore = false
                this.productList = []
            }
            
            if (this.loading || this.noMore) return
            
            this.loading = true
            try {
                const params = {
                    name: this.searchKeyword,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
                
                const res = await getCollectList(params)
                const list = res.data.list || []
                
                if (refresh) {
                    this.productList = list
                } else {
                    this.productList = [...this.productList, ...list]
                }
                
                this.noMore = list.length < this.pageSize
                this.pageNum++
            } catch (error) {
                console.error('获取收藏列表失败:', error)
                uni.showToast({
                    title: '获取数据失败',
                    icon: 'none'
                })
            } finally {
                this.loading = false
                if (refresh) {
                    this.isRefreshing = false
                }
            }
        },
        handleSearch() {
            if (this.timer) {
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                this.loadData(true)
            }, 300)
        },
        async refresh() {
            this.isRefreshing = true
            await this.loadData(true)
        },
        loadMore() {
            this.loadData()
        },
        goToProductDetail(productId) {
            uni.navigateTo({
                url: `/pages/product-detail/product-detail?id=${productId}`
            });
        },
        addToCart(item) {
            if (!item.taocode) {
                uni.showToast({
                    title: '该商品暂无淘口令',
                    icon: 'none'
                });
                return;
            }
            
            uni.setClipboardData({
                data: item.taocode,
                success: () => {
                    uni.showModal({
                        title: '复制成功',
                        content: '淘口令已复制，请打开淘宝APP查看商品',
                        showCancel: false,
                        confirmText: '我知道了'
                    });
                },
                fail: () => {
                    uni.showToast({
                        title: '复制失败，请重试',
                        icon: 'none'
                    });
                }
            });
        },
        handleLoginSuccess() {
            this.showLoginPopup = false
            this.loadData(true)
        },
        handleLoginFail() {
            this.showLoginPopup = false
        },
        handleLoginCancel() {
            this.showLoginPopup = false
        }
    }
}
</script>

<style lang="scss" scoped>
.favorite-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    
    .favorite-top {
        position: relative;
        height: 300rpx;
        
        .bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .header-title {
            position: relative;
            z-index: 2;
            padding: 100rpx 32rpx 20rpx;
            font-size: 50rpx;
            font-weight: bold;
            color: #fff;
        }
        
        .search-bar {
            position: relative;
            z-index: 2;
            padding: 0 32rpx;
            
            .search-input {
                display: flex;
                align-items: center;
                width: 646rpx;
                height: 76rpx;
                background: #FFFFFF;
                border-radius: 4rpx;
                padding: 0 20rpx;
                
                .search-icon {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 10rpx;
                }
                
                input {
                    flex: 1;
                    font-size: 28rpx;
                }
            }
        }
    }
    
    .product-list {
        height: calc(100vh - 260rpx);
        padding: 32rpx;
        box-sizing: border-box;
        
        .product-item {
            display: flex;
            background-color: #fff;
            border-radius: 16rpx;
            padding: 24rpx;
            margin-bottom: 24rpx;
            
            .product-image {
                width: 200rpx;
                height: 200rpx;
                border-radius: 8rpx;
                margin-right: 24rpx;
            }
            
            .product-info {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                
                .product-title {
                    font-size: 28rpx;
                    color: #333;
                    line-height: 1.4;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                
                .price-container {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    
                    .price-info {
                        .current-price {
                            font-size: 32rpx;
                            color: #ff4444;
                            font-weight: bold;
                            margin-right: 12rpx;
                        }
                        
                        .original-price {
                            font-size: 24rpx;
                            color: #999;
                            text-decoration: line-through;
                        }
                    }
                    
                    .cart-icon {
                        width: 48rpx;
                        height: 48rpx;
                        
                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
        
        .loading, .no-more {
            text-align: center;
            padding: 24rpx;
            color: #999;
            font-size: 24rpx;
        }
    }
}
</style>